<template>
  <div>
    <el-badge  :is-dot="count > 0 ? true : false" class="item" >
        <svg-icon :icon-class="'notifications'" class="notifications-svg" @click="jumpNotification()" />
    </el-badge>
  </div>
</template>

<script>
import { messageCount } from '@/api/permission'

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
        messageCount().then(res => {
            this.count = res.data
        })
    },
    jumpNotification()
    {
        this.count = 0
        this.$router.push({ path:'/notifications'})
    }
  }
}
</script>

<style scoped>
.notifications-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
.item > svg {
    display: block;
}
</style>
